<template>
    <!-- 主内容区域 - 半包围结构 -->
    <div class="main-layout">
        <!-- 左侧次要指标区域 -->
        <div class="left-sidebar">
            <div class="left-top-siderbar">
                <dv-border-box-13>
                    <div class="box-content">
                        <div class="title">业务量统计</div>
                        <div>
                            <div id="leftTopChart" style="width: 100%;height: 200px;"></div>
                        </div>
                    </div>
                </dv-border-box-13>
            </div>
            <div class="left-middle-siderbar">
                <dv-border-box-13>
                    <div class="box-content" style="gap: 20px;">
                        <div class="title">重点管控</div>
                        <div class="row-box" style="justify-content: space-between;">
                            <div class="item-box" style="width: 23%;">
                                <dv-border-box-10>
                                    <div class="wrap-box" style="padding: 10px;">
                                        <div class="focus-card-title" style="width: 100%;">A业务总量</div>
                                        <div class="focus-card-value" style="margin-left: 6px;margin-right: 8px;">3000
                                        </div>
                                        <div class="focus-card-rate">+7.9%</div>
                                    </div>
                                </dv-border-box-10>
                            </div>
                            <div class="item-box" style="width: 23%;">
                                <dv-border-box-10>
                                    <div class="wrap-box" style="padding:  10px 10px 10px 10px;">
                                        <div class="focus-card-title" style="width: 100%;">A业务总量</div>
                                        <div class="focus-card-value" style="margin-left: 6px;margin-right: 8px;">3000
                                        </div>
                                        <div class="focus-card-rate">+7.9%</div>
                                    </div>
                                </dv-border-box-10>
                            </div>
                            <div class="item-box" style="width: 23%;">
                                <dv-border-box-10>
                                    <div class="wrap-box" style="padding:  10px 10px 10px 10px;">
                                        <div class="focus-card-title" style="width: 100%;">A业务总量</div>
                                        <div class="focus-card-value" style="margin-left: 6px;margin-right: 8px;">3000
                                        </div>
                                        <div class="focus-card-rate">+7.9%</div>
                                    </div>
                                </dv-border-box-10>
                            </div>
                            <div class="item-box" style="width: 23%;">
                                <dv-border-box-10>
                                    <div class="wrap-box" style="padding:  10px 10px 10px 10px;">
                                        <div class="focus-card-title" style="width: 100%;">A业务总量</div>
                                        <div class="focus-card-value" style="margin-left: 6px;margin-right: 8px;">3000
                                        </div>
                                        <div class="focus-card-rate">+7.9%</div>
                                    </div>
                                </dv-border-box-10>
                            </div>
                        </div>
                        <div id="leftMiddleChart" style="width: 100%;height: 140px;"></div>
                    </div>
                </dv-border-box-13>
            </div>
            <div class="left-bottom-siderbar">
                <dv-border-box-13>
                    <div class="box-content">
                        <div class="title">占比分析</div>
                        <div id="leftBottomChart" style="width: 100%;height: 200px;"></div>
                    </div>
                </dv-border-box-13>
            </div>
        </div>

        <!-- 中间主视觉区域 -->
        <div class="main-content">
            <!-- 中上主要指标区域 -->
            <div class="main-top">
                <Ditu />
            </div>

            <!-- 中下次要图表区域 -->
            <div class="main-bottom">
                <dv-border-box-13>
                    <div class="box-content " style="gap: 10px;">
                        <div class="title">区域网格建设</div>
                        <div class="row-box">
                            <div class="left-bottom-main">
                                <dv-border-box-10>
                                    <div id="leftMainChart" style="width: 100%;height: 240px;"></div>
                                </dv-border-box-10>
                            </div>
                            <div class="right-bottom-main">
                                <dv-border-box-10>
                                    <div class="row-box" style="justify-content: space-between;padding: 10px;">
                                        <div class="item-box">
                                            <dv-border-box-10>
                                                <div class="column-box"
                                                    style="padding: 10px;justify-content: center;align-items: center;">
                                                    <div class="focus-card-rate">年计划销售量</div>
                                                    <div class="focus-card-value">10,000万元</div>
                                                </div>
                                            </dv-border-box-10>
                                        </div>
                                        <div class="item-box">
                                            <dv-border-box-10>
                                                <div class="column-box"
                                                    style="padding: 6px;justify-content: center;align-items: center;">
                                                    <div class="focus-card-rate">年计划销售量</div>
                                                    <div class="focus-card-value">10,000万元</div>
                                                </div>
                                            </dv-border-box-10>
                                        </div>
                                        <div class="item-box">
                                            <dv-border-box-10>
                                                <div class="column-box"
                                                    style="padding: 10px;justify-content: center;align-items: center;">
                                                    <div class="focus-card-rate">年计划销售量</div>
                                                    <div class="focus-card-value">10,000万元</div>
                                                </div>
                                            </dv-border-box-10>
                                        </div>
                                    </div>
                                    <div class="row-box" style="">
                                        <div id="rightMainChart1" style="width: 50%;height: 110px;"></div>
                                        <div id="rightMainChart2" style="width: 50%;height: 110px;"></div>
                                    </div>
                                </dv-border-box-10>
                            </div>
                        </div>
                    </div>
                </dv-border-box-13>
            </div>
        </div>

        <!-- 右侧次要指标区域 -->
        <div class="right-sidebar">
            <div class="right-top-siderbar">
                <dv-border-box-13>
                    <div class="box-content">
                        <div class="title">数据统计</div>

                        <div id="rightTopChart" style="width: 100%;height: 220px;"></div>
                    </div>
                </dv-border-box-13>
            </div>
            <div class="right-middle-siderbar">
                <dv-border-box-13>
                    <div class="box-content">
                        <div class="title">风险提示</div>
                        <div id="rightMiddleChart" style="width: 100%;height: 220px;"></div>
                    </div>
                </dv-border-box-13>
            </div>
            <div class="right-bottom-siderbar">
                <dv-border-box-13>
                    <div class="box-content">
                        <div class="title" style="margin-bottom: 40px;">咨询情况</div>
                        <div class="tag-cloud-container">
                            <div class="tag-item tag-primary">产业数据</div>
                            <div class="tag-item tag-secondary">技术保护</div>
                            <div class="tag-item tag-secondary">创意产业</div>
                            <div class="tag-item tag-secondary">产权争议</div>
                            <div class="tag-item tag-secondary">产权争议</div>
                            <div class="tag-item tag-tertiary">密码重置</div>
                            <div class="tag-item tag-tertiary">智能客服</div>
                            <div class="tag-item tag-tertiary">国际合作</div>
                            <div class="tag-item tag-tertiary">业务情况</div>
                        </div>
                    </div>
                </dv-border-box-13>
            </div>
        </div>
    </div>
</template>

<script setup>
import * as echarts from "echarts";
import { onMounted } from 'vue';
import Ditu from '@/components/ditu.vue';

// 风险提示
const initRightMiddleChart = () => {
    let chartDom = document.getElementById('rightMiddleChart');
    let myChart = echarts.init(chartDom);
    let option; option = {
        title: {
            text: '',
            left: '10%',
            top: '5%',
            textStyle: {
                color: '#fff',
                fontSize: 18
            }
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'cross'
            }
        },
        legend: {
            data: ['国控性债务', '政府性债务'],
            left: 'center',
            top: '5%',
            textStyle: {
                color: '#fff'
            },
            itemWidth: 12,
            itemHeight: 12
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            top: '20%',
            containLabel: true
        },
        xAxis: {
            type: 'category',
            data: ['2012', '2013', '2014', '2015', '2016', '2017', '2018', '2019', '2021', '2022', '2023', '2024'],
            axisLabel: {
                color: '#fff'
            },
            axisLine: {
                lineStyle: {
                    color: '#485465'
                }
            }
        },
        yAxis: {
            type: 'value',
            name: '(%)',
            min: 0,
            max: 100,
            interval: 20,
            axisLabel: {
                color: '#fff'
            },
            axisLine: {
                lineStyle: {
                    color: '#485465'
                }
            },
            splitLine: {
                lineStyle: {
                    color: ['#485465']
                }
            }
        },
        series: [
            {
                name: '国控性债务',
                type: 'line',
                data: [85, 78, 82, 75, 82, 75, 78, 65, 68, 65, 75, 65],
                itemStyle: {
                    color: '#7b61ff'
                },
                lineStyle: {
                    color: '#7b61ff'
                },
                symbol: 'circle',
                symbolSize: 8
            },
            {
                name: '政府性债务',
                type: 'line',
                data: [50, 62, 50, 55, 50, 65, 60, 70, 65, 70, 68, 75],
                itemStyle: {
                    color: '#ffb74d'
                },
                lineStyle: {
                    color: '#ffb74d'
                },
                symbol: 'circle',
                symbolSize: 8
            }
        ]
    };

    option && myChart.setOption(option);

};
// 数据统计
const initRightTopChart = () => {
    let chartDom = document.getElementById('rightTopChart');
    let myChart = echarts.init(chartDom);
    let option; option = {
        backgroundColor: '#0f2b48',
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'cross',
                label: {
                    backgroundColor: '#6a7985'
                }
            }
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            top: '10%',
            containLabel: true
        },
        xAxis: {
            type: 'category',
            data: ['业务A', '业务B', '业务C', '业务D'],
            axisLabel: {
                color: '#fff'
            },
            axisLine: {
                lineStyle: {
                    color: '#485465'
                }
            }
        },
        yAxis: {
            type: 'value',
            min: 0,
            max: 5000,
            interval: 1000,
            axisLabel: {
                color: '#fff',
                formatter: '{value} 件'
            },
            axisLine: {
                lineStyle: {
                    color: '#485465'
                }
            },
            splitLine: {
                lineStyle: {
                    color: ['#485465']
                }
            }
        },
        series: [
            {
                name: '业务数据',
                type: 'line',
                data: [2500, 4000, 1800, 2500],
                itemStyle: {
                    color: '#00cfff'
                },
                lineStyle: {
                    color: '#00cfff'
                },
                areaStyle: {
                    color: {
                        type: 'linear',
                        x: 0,
                        y: 0,
                        x2: 0,
                        y2: 1,
                        colorStops: [{
                            offset: 0, color: 'rgba(0, 207, 255, 0.3)'
                        }, {
                            offset: 1, color: 'rgba(0, 207, 255, 0)'
                        }]
                    }
                },
                symbol: 'circle',
                symbolSize: 10
            },
            {
                name: '对比数据',
                type: 'line',
                data: [2600, 2000, 3300, 1600],
                itemStyle: {
                    color: '#32cd32'
                },
                lineStyle: {
                    color: '#32cd32'
                },
                symbol: 'circle',
                symbolSize: 10
            }
        ]
    };

    option && myChart.setOption(option);

};
// 区域网格建设2-2
const initRightMainChart2 = () => {
    let chartDom = document.getElementById('rightMainChart2');
    let myChart = echarts.init(chartDom);
    let option;
    option = {
        graphic: [
            // 左侧计划户数文本
            {
                type: 'text',
                left: '10%',
                top: '36%',
                style: {
                    text: '计划户数',
                    fill: '#fff',
                    fontSize: 14,
                    align: 'center'
                }
            },
            {
                type: 'text',
                left: '16%',
                top: '50%',
                style: {
                    text: '90',
                    fill: '#fff',
                    fontSize: 20,
                    fontWeight: 'bold',
                    align: 'center'
                }
            },
            {
                type: 'text',
                left: '30%',
                top: '60%',
                style: {
                    text: '万户',
                    fill: '#fff',
                    fontSize: 12,
                    align: 'center'
                }
            },
            {
                type: 'text',
                left: '30%',
                top: '92%',
                style: {
                    text: '同比15%',
                    fill: '#52c41a',
                    fontSize: 10,
                    align: 'center'
                }
            },
            // 右侧完成户数文本
            {
                type: 'text',
                left: '55%',
                top: '30%',
                style: {
                    text: '完成户数',
                    fill: '#fff',
                    fontSize: 14,
                    align: 'center'
                }
            },
            {
                type: 'text',
                left: '55%',
                top: '50%',
                style: {
                    text: '110',
                    fill: '#fff',
                    fontSize: 20,
                    fontWeight: 'bold',
                    align: 'center'
                }
            },
            {
                type: 'text',
                left: '75%',
                top: '60%',
                style: {
                    text: '万户',
                    fill: '#fff',
                    fontSize: 12,
                    align: 'center'
                }
            },
            {
                type: 'text',
                left: '70%',
                top: '90%',
                style: {
                    text: '同比110%',
                    fill: '#52c41a',
                    fontSize: 10,
                    align: 'center'
                }
            }
        ],
        series: [
            // 左侧计划户数圆环
            {
                type: 'pie',
                center: ['30%', '50%'], // 左侧位置
                radius: ['70%', '85%'], // 圆环宽度（外半径-内半径）
                data: [{ value: 1, itemStyle: { color: '#118c92' } }],
                label: { show: false },
                labelLine: { show: false }
            },
            // 右侧完成户数圆环
            {
                type: 'pie',
                center: ['70%', '50%'], // 右侧位置
                radius: ['70%', '85%'],
                data: [{ value: 1, itemStyle: { color: '#118c92' } }],
                label: { show: false },
                labelLine: { show: false }
            }
        ]
    };
    option && myChart.setOption(option);

};
// 区域网格建设2-1
const initRightMainChart1 = () => {
    let chartDom = document.getElementById('rightMainChart1');
    let myChart = echarts.init(chartDom);
    let option;
    option = {
        graphic: [
            // 左侧计划户数文本
            {
                type: 'text',
                left: '10%',
                top: '36%',
                style: {
                    text: '计划收入',
                    fill: '#fff',
                    fontSize: 14,
                    align: 'center'
                }
            },
            {
                type: 'text',
                left: '16%',
                top: '50%',
                style: {
                    text: '100',
                    fill: '#fff',
                    fontSize: 20,
                    fontWeight: 'bold',
                    align: 'center'
                }
            },
            {
                type: 'text',
                left: '30%',
                top: '60%',
                style: {
                    text: '万户',
                    fill: '#fff',
                    fontSize: 12,
                    align: 'center'
                }
            },
            {
                type: 'text',
                left: '30%',
                top: '92%',
                style: {
                    text: '同比15%',
                    fill: '#52c41a',
                    fontSize: 10,
                    align: 'center'
                }
            },
            // 右侧完成户数文本
            {
                type: 'text',
                left: '55%',
                top: '30%',
                style: {
                    text: '实际收入',
                    fill: '#fff',
                    fontSize: 14,
                    align: 'center'
                }
            },
            {
                type: 'text',
                left: '55%',
                top: '50%',
                style: {
                    text: '130',
                    fill: '#fff',
                    fontSize: 20,
                    fontWeight: 'bold',
                    align: 'center'
                }
            },
            {
                type: 'text',
                left: '75%',
                top: '60%',
                style: {
                    text: '万户',
                    fill: '#fff',
                    fontSize: 12,
                    align: 'center'
                }
            },
            {
                type: 'text',
                left: '70%',
                top: '90%',
                style: {
                    text: '同比110%',
                    fill: '#52c41a',
                    fontSize: 10,
                    align: 'center'
                }
            }
        ],
        series: [
            // 左侧计划户数圆环
            {
                type: 'pie',
                center: ['30%', '50%'], // 左侧位置
                radius: ['70%', '85%'], // 圆环宽度（外半径-内半径）
                data: [{ value: 1, itemStyle: { color: '#52c41a' } }], // 浅绿色圆环
                label: { show: false },
                labelLine: { show: false }
            },
            // 右侧完成户数圆环
            {
                type: 'pie',
                center: ['70%', '50%'], // 右侧位置
                radius: ['70%', '85%'],
                data: [{ value: 1, itemStyle: { color: '#52c41a' } }],
                label: { show: false },
                labelLine: { show: false }
            }
        ]
    };

    option && myChart.setOption(option);

};

// 区域网格建设1
const initLeftMainChart = () => {
    let chartDom = document.getElementById('leftMainChart');
    let myChart = echarts.init(chartDom);
    let option;
    option = {
        title: [
            {
                // 环形中心标题
                text: '业务类型',
                left: '40%',
                top: '50%',
                textAlign: 'center',
                textVerticalAlign: 'middle',
                textStyle: {
                    color: '#ffffff',
                    fontSize: 16,
                    fontWeight: 'bold'
                },
                // 标题位置偏移（ECharts 6支持直接定位）
                position: ['50%', '50%'],
                formatter: '{value}',
                value: '业务类型'
            }
        ],
        legend: {
            // 右侧图例
            orient: 'vertical', // 垂直排列
            right: 20,
            top: 'center',
            itemWidth: 12, // 图例标识宽度
            itemHeight: 12, // 图例标识高度
            itemGap: 10, // 图例项间距
            textStyle: {
                color: '#ffffff',
                fontSize: 12
            },
            data: [
                '服务类', '硬件类', '软件类', '销售类',
                '零售类', '批发类', '教育类', '其他'
            ]
        },
        series: [
            {
                type: 'pie',
                radius: ['40%', '70%'], // 内半径40%，外半径70%形成环形
                center: ['40%', '55%'], // 居中显示
                data: [
                    { value: 10, name: '服务类', itemStyle: { color: '#4caf50' } },
                    { value: 18, name: '硬件类', itemStyle: { color: '#e91e63' } },
                    { value: 17, name: '软件类', itemStyle: { color: '#03a9f4' } },
                    { value: 5, name: '销售类', itemStyle: { color: '#b71c1c' } },
                    { value: 5, name: '零售类', itemStyle: { color: '#9c27b0' } },
                    { value: 25, name: '批发类', itemStyle: { color: '#f44336' } },
                    { value: 10, name: '教育类', itemStyle: { color: '#ff9800' } },
                    { value: 10, name: '其他', itemStyle: { color: '#2196f3' } }
                ],
                // 扇区标签（显示占比）
                label: {
                    show: true,
                    position: 'outside', // 标签在扇区外侧
                    formatter: '{d}%', // 显示百分比
                    color: '#ffffff',
                    fontSize: 12,
                    distance: 5 // 标签与扇区的距离
                },
                // 标签连接线
                labelLine: {
                    show: true,
                    length: 10, // 第一段线长度
                    length2: 10, // 第二段线长度
                    lineStyle: {
                        width: 1,
                        color: function (params) {
                            // 连接线颜色与扇区一致
                            return params.data.itemStyle.color;
                        }
                    }
                },
                // 鼠标悬浮高亮效果（ECharts 6默认优化）
                emphasis: {
                    itemStyle: {
                        shadowBlur: 10,
                        shadowColor: 'rgba(255, 255, 255, 0.3)'
                    }
                }
            }
        ],
        tooltip: {
            // 提示框配置
            trigger: 'item',
            formatter: '{a} <br/>{b}: {c}%', // 格式：业务类型: 占比%
            backgroundColor: 'rgba(15, 28, 45, 0.8)',
            borderColor: '#4caf50',
            borderWidth: 1,
            textStyle: { color: '#fff' }
        }
    };

    option && myChart.setOption(option);

};

// 占比分析
const initLeftBottomChart = () => {
    let chartDom = document.getElementById('leftBottomChart');
    let myChart = echarts.init(chartDom);
    let option;
    option = {
        // 图例配置
        legend: {
            data: ['业务量', '占比'],
            textStyle: {
                color: '#fff'
            },
            right: 10,
            top: 10
        },

        // 网格配置
        grid: {
            left: '3%',
            right: '3%',
            bottom: '3%',
            top: '15%',
            containLabel: true
        },

        // Y轴配置
        yAxis: {
            type: 'category',
            data: ['业务A', '业务B', '业务C', '业务D', '业务E', '业务F'],
            axisLabel: {
                align: 'center',
                color: '#fff'
            },
            axisLine: {
                show: false
            },
            axisTick: {
                show: false
            }
        },

        // X轴配置 - 业务量轴（底部，蓝色）
        xAxis: [{
            type: 'value',
            position: 'bottom',
            name: '业务量（件）',
            nameTextStyle: {
                color: '#fff'
            },
            min: 0,
            max: 10000,
            interval: 2000,
            axisLabel: {
                formatter: '{value}',
                color: '#fff'
            },
            axisLine: {
                lineStyle: {
                    color: '#1890ff'
                }
            },
            splitLine: {
                show: false
            }
        },
        // X轴配置 - 占比轴（顶部，绿色）
        {
            type: 'value',
            position: 'top',
            name: '占比（%）',
            nameTextStyle: {
                color: '#fff'
            },
            min: 0,
            max: 100,
            interval: 20,
            axisLabel: {
                formatter: '{value}%',
                color: '#fff'
            },
            axisLine: {
                lineStyle: {
                    color: '#52c41a'
                }
            },
            splitLine: {
                show: false
            }
        }],

        // 数据系列配置
        series: [
            // 业务量系列（蓝色条形）
            {
                name: '业务量',
                type: 'bar',
                xAxisIndex: 0,
                data: [6500, 4300, 6532, 3732, 8832, 6632],
                itemStyle: {
                    color: '#1890ff'
                },
                barWidth: 20,
                label: {
                    show: true,
                    position: 'right',
                    formatter: '{c}',
                    color: '#fff',
                    fontWeight: 'bold'
                }
            },
            // 占比系列（绿色条形）
            {
                name: '占比',
                type: 'bar',
                xAxisIndex: 1,
                data: [19.80, 26.80, 18.80, 16.33, 37.33, 27.33],
                itemStyle: {
                    color: '#52c41a'
                },
                barWidth: 20,
                label: {
                    show: true,
                    position: 'right',
                    formatter: '{c}%',
                    color: '#fff',
                    fontWeight: 'bold'
                }
            }
        ],

        // 提示框配置
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'shadow'
            },
            formatter: function (params) {
                let result = params[0].name + '<br/>';
                params.forEach(function (item) {
                    let value = item.seriesName === '占比' ? item.value + '%' : item.value;
                    result += `<span style="display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:${item.color}"></span>`;
                    result += item.seriesName + ': ' + value + '<br/>';
                });
                return result;
            }
        },

        // 背景色（可选，根据实际需要设置）
        backgroundColor: 'transparent'
    };

    option && myChart.setOption(option);

};
// 重点管控
const initLeftMiddleChart = () => {
    let chartDom = document.getElementById('leftMiddleChart');
    let myChart = echarts.init(chartDom);
    let option;

    const datas = [
        [
            { name: '业务数量A', value: 2.0 },
            { name: '业务数量B', value: 2.0 },
            { name: '业务数量C', value: 2.0 },
            { name: '业务数量D', value: 2.0 },
        ]
    ];

    option = {
        series: datas.map(function (data, idx) {
            var top = idx * 33.3;
            return {
                type: 'pie',
                radius: [40, 60],
                top: top + '%',
                height: '90%',
                left: 'center',
                width: 400,
                itemStyle: {
                    borderColor: '#fff',
                    borderWidth: 1
                },
                label: {
                    minMargin: 5,
                    edgeDistance: 10,
                    lineHeight: 15,
                    rich: {
                        time: {
                            fontSize: 10,
                            color: '#999'
                        }
                    }
                },
                labelLine: {
                    length: 15,
                    length2: 0,
                    maxSurfaceAngle: 80
                },
                labelLayout: function (params) {
                    const isLeft = params.labelRect.x < myChart.getWidth() / 2;
                    const points = params.labelLinePoints;
                    // Update the end point.
                    points[2][0] = isLeft
                        ? params.labelRect.x
                        : params.labelRect.x + params.labelRect.width;

                    return {
                        labelLinePoints: points
                    };
                },
                data: data
            };
        })
    };


    option && myChart.setOption(option);

};
// 业务统计图表
const initLeftTopChart = () => {
    let chartDom = document.getElementById('leftTopChart');
    let myChart = echarts.init(chartDom);
    let option;

    option = {
        series: [
            {
                type: 'custom',
                renderItem: function (params, api) {
                    const value = api.value(1);
                    const coloredCount = api.value(2); // 彩色图标数量
                    const category = coloredCount == 7 ? '今日' : coloredCount == 5 ? '本周' : '本月';
                    const totalIcons = 10; // 固定10个图标

                    // 颜色映射（严格匹配原图色调）
                    const colorConfig = {
                        '今日': {
                            light: '#42a5f5', // 彩色图标
                            dark: '#1565c0',  // 深色图标
                            text: '#64b5f6'   // 数值颜色
                        },
                        '本周': {
                            light: '#ffeb3b',
                            dark: '#8d6e63',
                            text: '#ffee58'
                        },
                        '本月': {
                            light: '#4caf50',
                            dark: '#2e7d32',
                            text: '#81c784'
                        }
                    };
                    const color = colorConfig[category] || { light: '#42a5f5', dark: '#1565c0', text: '#64b5f6' };

                    // 生成10个人形图标
                    const icons = [];
                    for (let i = 0; i < totalIcons; i++) {
                        // 人形图标SVG路径（头部+身体）
                        const path = 'M' + (10 + i * 30) + ',0 ' + // 起点x坐标（随i递增）
                            'C' + (10 + i * 30) + ',10 ' + (20 + i * 30) + ',15 ' + (20 + i * 30) + ',25 ' + // 身体曲线
                            'C' + (20 + i * 30) + ',35 ' + (10 + i * 30) + ',40 ' + (10 + i * 30) + ',30 ' + // 身体底部
                            'C' + (10 + i * 30) + ',20 ' + (5 + i * 30) + ',10 ' + (10 + i * 30) + ',0 Z'; // 头部（闭合）

                        icons.push({
                            type: 'path',
                            shape: { d: path },
                            style: {
                                fill: i < coloredCount ? color.light : color.dark,
                                stroke: 'none'
                            },
                            position: [100, params.dataIndex * 50 + 50] // 垂直偏移（每行间隔50px）
                        });
                    }

                    return {
                        type: 'group',
                        children: [
                            // 时间维度标签（如“今日”）
                            {
                                type: 'text',
                                style: {
                                    x: 30,
                                    y: params.dataIndex * 50 + 65, // 垂直居中对齐图标
                                    text: category,
                                    fill: '#ffffff',
                                    fontSize: 16
                                }
                            },
                            // 人形图标组
                            ...icons,
                            // 业务量数值
                            {
                                type: 'text',
                                style: {
                                    x: 100 + totalIcons * 30 + 20, // 图标右侧20px
                                    y: params.dataIndex * 50 + 65,
                                    text: value,
                                    fill: color.text,
                                    fontSize: 18,
                                    fontWeight: 'bold'
                                }
                            }
                        ]
                    };
                },
                data: [
                    ['今日', 2351, 7],   // 7个蓝色图标
                    ['本周', 8266, 5],   // 5个黄色图标
                    ['本月', 31527, 4]   // 4个绿色图标
                ],
                xAxisIndex: 0,
                yAxisIndex: 0
            }
        ],
        // 隐藏坐标轴（无需刻度）
        xAxis: [{ show: false }],
        yAxis: [{ show: false }],
        // 网格控制整体边距
        grid: {
            left: 10,
            right: 10,
            top: 10,
            bottom: 10,
            containLabel: true
        }
    };

    option && myChart.setOption(option);

};

onMounted(() => {
    initLeftTopChart();
    initLeftMiddleChart();
    initLeftBottomChart();
    initLeftMainChart();
    initRightMainChart1();
    initRightMainChart2();
    initRightTopChart();
    initRightMiddleChart();
})
</script>

<style lang="scss" scoped>
.focus-card-title {
    color: #aed6f1;
    font-size: 13px;
    margin-bottom: 6px;
}

.focus-card-value {
    color: #ffffff;
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 4px;
}

.focus-card-rate {
    font-size: 12px;
}

.map-container {
    width: 100%;
    height: 500px;
}

.box-content {
    display: flex;
    flex-direction: column;
    padding: 20px;
}

.title {
    font-weight: bold;
}

.wrap-box {
    display: flex;
    flex-wrap: wrap;
}

.row-box {
    display: flex;
}

.column-box {
    display: flex;
    flex-direction: column;
}

.main-layout {
    flex: 1;
    display: grid;
    grid-template-columns: 2fr 3fr 2fr;
    gap: 20px;
    margin-top: 16px;
    height: 900px;
}


// 左右侧边栏样式
.left-sidebar,
.right-sidebar {
    display: flex;
    flex-direction: column;
    gap: 10px;

    .left-top-siderbar,
    .right-top-siderbar {
        flex: 1;

    }

    .left-middle-siderbar,
    .right-middle-siderbar {
        flex: 1;
    }

    .left-bottom-siderbar,
    .right-bottom-siderbar {
        flex: 1;
    }

    // 放射状布局样式
    .tag-cloud-container {
        display: flex;
        flex-wrap: wrap;
        gap: 20px;
        box-sizing: border-box;
        justify-content: center;
        align-items: center;
    }

    .tag-item {
        color: #00f0e1;
        font-family: "Microsoft Yahei", sans-serif;
        text-align: center;
        padding: 8px 16px;
        border-radius: 20px;
        transition: all 0.3s ease;
    }

    .tag-item:hover {
        transform: scale(1.1);
        box-shadow: 0 0 15px rgba(0, 240, 225, 0.5);
    }

    .tag-primary {
        font-size: 28px;
        font-weight: bold;
        background: linear-gradient(135deg, #00f0e1, #4cc9f0);
        color: #0a1929;
        padding: 12px 24px;
    }

    .tag-secondary {
        font-size: 20px;
        background: rgba(0, 240, 225, 0.2);
        border: 1px solid #00f0e1;
    }

    .tag-tertiary {
        font-size: 16px;
        color: #4cc9f0;
        background: rgba(76, 201, 240, 0.1);
        border: 1px solid #4cc9f0;
    }

}

// 中间主内容区域
.main-content {
    display: flex;
    flex-direction: column;
    gap: 20px;
    height: 100%;
}

.main-top {
    flex: 2;
}

.main-bottom {
    flex: 1;
    display: flex;
    gap: 20px;

    .box-content {
        .row-box {
            gap: 10px;

            .left-bottom-main {
                flex: 1;
            }

            .right-bottom-main {
                flex: 1;
            }

        }

    }
}
</style>